<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/flexible.js"></script>
</head>
<body>
  <div id="app">
    <!-- edu-header -->
    <div class="edu-header">
      <div class="edu-header-info">
        <div class="weather">
          <div class="weather-text">晴转多云 20/11</div>
          <div class="weather-ico"></div>
        </div>
        <div class="date">10月20日 周五 农历九月初一</div>
      </div>
    </div>
    <!-- /edu-header -->
    <!-- edu-main -->
    <div class="edu-main header-through nav-through">
      <div class="edu-carousel">
        <div class="swiper-container" id='index-focus'>
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/carousel-temp-1.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-2.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-3.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-4.jpg"></div>
            <div class="swiper-slide"><img src="img/carousel-temp-5.jpg"></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="edu-vessel">
        <div class="edu-vessel-inner">
          <div class="tr">
            <div class="edu-switch" id='index-switch'>
              <div class="edu-switch-item active">新闻<i>新闻</i></div>
              <div class="edu-switch-item">视频<i>视频</i></div>
            </div>
          </div>
          <div class="switch-content">
            <div class="swiper-container" id='index-list' style="height: 5.462962963rem;">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="edu-media-wrap">
                    <a class="edu-media" href="#">
                      <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                      <div class="edu-media-body">
                        <h4>我们学生时代的教师节</h4>
                        <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                      </div>
                    </a>
                    <div class="edu-media">
                      <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                      <div class="edu-media-body">
                        <h4>我们学生时代的教师节</h4>
                        <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                      </div>
                    </div>
                    <div class="edu-media">
                      <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                      <div class="edu-media-body">
                        <h4>我们学生时代的教师节</h4>
                        <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                      </div>
                    </div>
                    <div class="edu-media">
                      <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                      <div class="edu-media-body">
                        <h4>我们学生时代的教师节</h4>
                        <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                      </div>
                    </div>
                    <div class="edu-media">
                      <div class="edu-media-left"><img src="./img/media-temp.png"></div>
                      <div class="edu-media-body">
                        <h4>我们学生时代的教师节</h4>
                        <p>家长杜春燕（儿子曹子一，城北中心六街小学五年级）</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="edu-thumbnail-wrap">
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                    <div class="edu-thumbnail" data-video-id='1'>
                      <div class="edu-thumbnail-preview">
                        <div class="edu-thumbnail-preview-inner"><img src="./img/media-temp.png"></div>
                      </div>
                      <h4>宝迪英语学堂</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /edu-main -->
    <!-- edu-nav -->
    <div class="edu-nav">
      <a href="index.html" class="edu-nav-link active">首页<i>首页</i></a>
      <a href="news.html" class="edu-nav-link">新闻<i>新闻</i></a>
      <a href="video.html" class="edu-nav-link">视频<i>视频</i></a>
      <a href="record.html" class="edu-nav-link">记录<i>记录</i></a>
      <a href="#" class="edu-nav-link back">返回<i>返回</i></a>
    </div>
    <!-- /edu-nav -->
  </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/video.min.js"></script>
<script>
  
  // 焦点图
  var focus = new Swiper('#index-focus', {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '#index-focus .swiper-pagination',
      clickable: true
    }
  })

  // 列表
  bindTab('#index-switch', new Swiper('#index-list', {
    direction: 'vertical',
    allowTouchMove: false
  }))

  function bindTab(tab, swiper) {
    var $tab = $(tab)

    // bind switch
    $tab.on('click', '.edu-switch-item', function(e) {
      e.preventDefault()

      var $el = $(e.target)

      if (!$el.is('.edu-switch-item')) {
        $el = $el.parents('.edu-switch-item')
      }

      if ($el.hasClass('disabled') || $el.attr('disabled')) {
        return
      }

      $el
        .addClass('active')
        .siblings()
        .removeClass('active')

      swiper.slideTo($el.index())

    })
    
    // bind swiper
    swiper.on('slideChange', function() {
      $tab.find('.edu-switch-item').removeClass('active')
      $tab.find('.edu-switch-item').eq(this.activeIndex).addClass('active')
    })
  }
  
  // 按钮动画
  $(document).on('click', '.edu-next,.edu-prev,.edu-nav-link', function(e) {

    var $el = $(e.target)

    if (!$el.is('.edu-next,.edu-prev,.edu-nav-link')) {
      $el = $el.parents('.edu-next,.edu-prev,.edu-nav-link')
    }

    $el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $el.removeClass('rubberBand')
    }).addClass('animated rubberBand')
  })
</script>
</html>